define([
  'jquery',
  'views/View'
], function($, View){
  var TabView = View.extend({
    events: {
      "click ul.tabs li":   "changeTab"
    },

    tabs: {
        
    },
    
    changeTab: function(evt){
      var $tabli = $(evt.currentTarget),
          $tabul = $tabli.parent(),
          tabName = $tabli.attr('name'),
          tabView;
      if(typeof this.tabs === 'function') {
          tabView = this.tabs()[tabName];
      } else if(typeof this.tabs === 'object') {
          tabView = this.tabs[tabName];
      }

      $tabul.children().each(function(i, c){
        var child = $(c);
        if(child.hasClass('active')) {
          child.removeClass('active');
        }
      });
      $tabli.addClass('active');
      // remove active class from the pill content class
      $("div[name=users-tab-content]").children().each(function(i, c){
        var child = $(c);
        if(child.hasClass('active')){
          child.removeClass('active');
        }
      });

      if(tabView) {
        $("div[name=users-tab-content] #"+tabName).addClass("active").html(tabView.render().el);
      } else {
        $("div[name=users-tab-content] #"+tabName).addClass("active").html("No encontrado");
      }
    }
  });

  return TabView;
});